<template>
  <el-popover
    v-model="showPopover"
    popper-class="no-padding-popover"
    placement="bottom"
    width="240"
    trigger="click">
    <div class="field-set">
      <el-input
        v-model="search"
        class="field-set__search"
        placeholder="搜索字段"
        @input="handleSearch" />

      <div
        v-loading="loading"
        class="field-set__content">
        <draggable
          v-model="fields"
          :options="{ dragClass: 'sortable-drag', forceFallback: false }">
          <div
            v-for="(item, index) in fields"
            :key="index"
            class="field-set__content--item text-one-line">
            <el-switch
              v-model="item.isHide"
              :active-value="0"
              :inactive-value="1" />
            <span v-if="item.center">{{ item.left }}<span class="input-word">{{ item.center }}</span>{{ item.right }}</span>
            <span v-else>{{ item.name }}</span>
          </div>
        </draggable>
      </div>

      <div class="field-set__ft">
        <el-button type="text" @click="handleReset">重置</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </div>

    <slot
      v-if="$slots.reference"
      slot="reference" />
    <i
      v-else
      slot="reference"
      class="wk wk-config table-set" />
  </el-popover>
</template>

<script>
/**
 * Create by yxk at 2020/5/30
 */
import { jxcFieldQueryConfigAPI, jxcFieldUpdateConfigAPI } from '@/api/jxc/field'

import Draggable from 'vuedraggable'
import { objDeepCopy } from '@/utils'
import jxcTypes from '../../jxcTypes'

export default {
  name: 'FieldsSet',
  components: {
    Draggable
  },
  props: {
    type: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      showPopover: false,
      loading: false,
      search: null,

      fields: []
    }
  },
  watch: {
    showPopover(val) {
      if (val) {
        this.getFieldList()
      }
    },
    label() {
      if (this.showPopover) {
        this.getFieldList()
      }
    }
  },
  methods: {
    /**
     * 获取字段配置信息
     */
    getFieldList() {
      this.loading = true
      jxcFieldQueryConfigAPI({
        label: jxcTypes[this.type].label
      }).then(res => {
        this.loading = false
        console.log(res.data)
        this.fieldsList = res.data
        this.fields = objDeepCopy(res.data)
      }).catch(() => {
        this.loading = false
      })
    },

    handleSearch() {
      this.fields = this.fields.map(item => {
        const index = item.name.indexOf(this.search)
        if (index != -1) {
          item.left = item.name.substr(0, index)
          item.center = item.name.substr(index, this.search.length)
          const rightIndex = index + this.search.length
          item.right = item.name.substr(rightIndex, item.name.length - rightIndex)
        } else {
          item.left = ''
          item.center = ''
          item.right = ''
        }
        return item
      })
    },

    handleReset() {
      this.fields = objDeepCopy(this.fieldsList)
    },

    handleSave() {
      const showIds = this.fields.filter(o => o.isHide == 0).map(o => o.id)
      if (showIds.length < 2) {
        this.$message.error('至少要显示两列')
        return
      }
      const params = {
        label: jxcTypes[this.type].label,
        hideIds: this.fields.filter(o => o.isHide != 0).map(o => o.id).join(','),
        noHideIds: showIds.join(',')
      }
      console.log('save', params)
      this.loading = true
      jxcFieldUpdateConfigAPI(params).then(res => {
        this.$message.success('操作成功')
        this.loading = true
        this.showPopover = false
        this.$emit('change')
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .field-set {
    &__search {
      padding: 8px 10px 0;
    }
    &__content {
      max-height: 250px;
      min-height: 100px;
      overflow: auto;
      &--item {
        cursor: move;
        padding: 5px 10px;
        font-size: 12px;
        .el-switch {
          transform: scale(0.8);
          margin-right: 3px;
          /deep/ .el-switch__core {
            width: 33px !important;
          }
        }
      }
      &--item:hover {
        background-color: #E7EDF4;
      }
    }

    &__ft {
      overflow: hidden;
      overflow-y: overlay;
      background-color: $xr--background-color-base;
      padding: 8px 0;
      margin-top: 10px;
      .el-button {
        font-size: 12px;
        float: right;
        padding: 6px 12px;
      }
    }
  }

  // 设置
  .table-set {
    width: 15px;
    margin-top: 5px;
    cursor: pointer;
    color: #9DA9C2;
  }

  // 搜索到的字
  .input-word {
    background-color: $xr-color-primary;
    color: white;
  }

  .sortable-drag {
    cursor: move;
  }
</style>
